/*
*作者---王婷
*
*/
<template>
    <div class="taking">
        <img src="./../../assets/my/member.jpg" v-if = 'notMember' class='notMemberPage'>
        <div class="head">
            <img src="../../assets/taking/orders.png" >
            <span>{{ titleText }}</span>
        </div>
        <div class="ordersBox">
            <div class="orders" v-for="(item,idx) in sData.list">
                <div class="orderHead">
                    <label @click='isTake(item,idx)'>
                        <img src="../../assets/taking/checked.png" v-if='isTaking[idx].taking'>
                        <img src="../../assets/taking/check.png" v-if='!isTaking[idx].taking'>
                        <span v-text="sData.admin.dispatchingType==3?'发货':'接单'"></span>
                    </label>
                    <span class="lastTime">{{item.countTime}}</span>
                </div>
                <div class="detail" v-for = "(orderItem,oidx) in item.orderItems">
                    <img :src="orderItem.thumbnail">
                    <div class='detailData'>
                        <p>{{orderItem.name}}</p>
                        <p v-if="orderItem.intro != 'undefined'">{{orderItem.intro}}</p>
                    </div>
                    <div class="num">
                        <h3>X{{orderItem.quantity}}</h3>
                    </div>
                </div>
                <div class="information">
                    <p class="infor1">
                        <span>{{item.receiverName}}</span>
                        <span>{{item.receiverPhone}}</span>
                    </p>
                    <p class='infor2'>{{item.receiverAreaName}}</p>
                </div>
                <div class="orderNum itm">
                    <span>订单号</span>
                    <span>{{item.orderSn}}</span>
                </div>
                <div class="time itm" v-if='sData.admin.dispatchingType!=3'>
                    <span>配送时间</span>
                    <span>{{item.sendTime}}</span>
                </div>
                <div class="time itm" v-if="sData.admin.dispatchingType==3">
                    <span>配送方式</span>
                    <span>{{item.shippingMethodName}}</span>
                </div>
                <div class="remark itm" v-if = 'item.intro'>
                    <span>订单备注</span>
                    <span>{{item.intro}}</span>
                </div>
            </div>
        </div>
       <div class="sure">
            <div>
                <label @click='checkAll' v-if="sData.admin.dispatchingType!=3">
                    <img src="../../assets/taking/checked.png" v-if='allCheck'>
                    <img src="../../assets/taking/check.png" v-if='!allCheck'>
                    <span>全选</span>
                </label>
                <div class="choosed">
                    <span>已选:</span>
                    <span>{{checkNum}}单</span>
                </div>
            </div>
            <div class="sureOrder" @click = 'sureOrder'>
                确认接单
            </div>
       </div>
       <div class="delivery" v-show='delivery'>
           <div>
               <p class='tit' v-text="sData.admin.dispatchingType==3?'填写运单编号':'填写配送员信息'"></p>
               <input type="" name="" placeholder="输入配送员姓名" v-model='name' v-if='sData.admin.dispatchingType==2'>
               <input type="" name="" placeholder="输入配送员电话" v-model='phone' v-if='sData.admin.dispatchingType==2' >
               <input type="" name="" placeholder="输入运单编号" v-model='code' v-if='sData.admin.dispatchingType==3'>
               <p class='btn'>
                   <span class='cancel' @click="cancel">取消</span>
                   <span class='submit' @click='submit'>提交</span>
               </p>
           </div>
       </div>
       <div class='empty' v-if='isEmpty'>
            <img src="./../../assets/com/empty.png">
            <p>暂无订单</p>
        </div>
        <div class='loading' v-if='load'>
            <img  v-show = '!noMore' src="">
            <p v-show='noMore'>没有更多了</p>
        </div>
        <selfFooter></selfFooter>
    </div>
</template>
<script type="text/javascript">
  export default{
    data(){
      return{
        sData:{
            admin:{},
            list:[]
        },
        notMember:false,
        load:false,
        noMore:false,
        add:true,
        isTaking:[],
        titleText:'',
        allCheck:false,
        checkNum:0,
        delivery:false,
        isEmpty: false,
        params:{
            orderList:[],
            dispatchingType:'',
            flashMen:'',
            flashMenPhone:'',
            snOut:''
        },
        name:'',
        phone:'',
        code:'',
        page:1
      }
    },
    methods:{
        cancel(){
            this.delivery = false;
        },
        submit(){
            if(this.sData.admin.dispatchingType==2){
                if(this.name==''){
                    m$.template({
                       val: '请输入配送员姓名',
                       time: 1500
                    })
                }else if(!(/^1[34578]\d{9}$/.test(this.phone))){
                    m$.template({
                       val: '电话号码输入有误',
                       time: 1500
                    })
                }else{
                    this.params.dispatchingType == 2;
                    this.params.flashMen = this.name;
                    this.params.flashMenPhone = this.phone;
                    this.postData();
                }
            }else if(this.sData.admin.dispatchingType==3){
                if(this.code==''){
                    m$.template({
                        val:'请输入运单编号',
                        time:1500
                    })
                }else if(!(/^[0-9]*$/.test(this.code))){
                    m$.template({
                       val: '请输入数字',
                       time: 1500
                    })
                }else{
                    this.params.dispatchingType == 3;
                    this.params.snOut = this.code;
                    this.postData();
                }
            }
            
            
        },
        sureOrder () {  
            if(this.checkNum == 0){
                m$.template({
                   val: '请选择订单',
                   time: 1500
                })
            }else{
                if(this.sData.admin.dispatchingType != 1){//除了自营     第三方和快递都弹框
                    console.log('弹出第三方配送信息')
                    this.delivery = true;
                }else{
                    this.postData();
                }
                
            }
            
        },
        postData (){
            this.load = true;
            this.noMore = false;
            this.postAjax('/order/remote/orderTaking', JSON.stringify(this.params),
            (res) => {
                if(res&&res.status == 200){
                    this.load = false;
                    this.delivery = false;
                    let othis = this;

                    console.log('&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&');
                    console.log(this.isTaking);
                    //选择项目全取消
                    this.isTaking.forEach(function(item,idx){
                        item.taking = false;
                    })
                    this.params.orderList.forEach(function(item,idx){
                        othis.sData.list.forEach(function(it,ix){
                            if(item==it.orderId){
                                othis.sData.list.splice(othis.sData.list.indexOf(it),1)
                            }    
                        })
                    })
                    if(this.sData.admin.dispatchingType != 3){
                         this.$router.push('/Sending')
                    }else{
                        this.$router.push('/MyOrder')
                    }
                    
                }else if(res&&res.status == 202){
                    m$.template({
                       val: res.message,
                       time: 1500,
                       fn:function(){
                        window.location.reload();
                       }
                    })
                    this.load = false;
                }else{
                    m$.template({
                       val: '很抱歉,接单失败了,请重新接单',
                       time: 1500,
                       fn:function(){
                        window.location.reload();
                       }
                    })
                    this.load = false;
                }
              
            })
        },
        isTake (item,idx) {
            if(this.sData.admin.dispatchingType==3){//快递
                this.isTaking[idx].taking = !this.isTaking[idx].taking;
                if(this.isTaking[idx].taking == true){
                    this.params.orderList.push(item.orderId);
                    this.checkNum = 1;
                    this.isTaking.forEach(function(it,ix){
                        if(it.taking == true && ix != idx){
                            it.taking = false;
                        }
                    })
                }else{
                    this.params.orderList.splice(this.params.orderList.indexOf(item.orderId),1);
                    this.checkNum = 0;
                }
            }else{//第三方和自营
                this.isTaking[idx].taking = !this.isTaking[idx].taking;
                //console.log(this.isTaking[idx].taking);
                 var notCheck = this.isTaking.filter((item,idx)=>{
                    if(item.taking == false){
                        return item;
                    }

                });
                if(this.isTaking[idx].taking == true){
                    this.params.orderList.push(item.orderId);
                }else{
                    this.params.orderList.splice(this.params.orderList.indexOf(item.orderId),1)
                }
                console.log(this.params.orderList)
                console.log(notCheck.length);
                this.checkNum = parseInt(this.isTaking.length - notCheck.length);
                if(notCheck.length == 0){
                    this.allCheck = true;
                }else{
                    this.allCheck = false;
                }
            }
            
        },
        checkAll (){
            if(this.sData.list.length != 0){
                this.allCheck = !this.allCheck;
                if(this.allCheck == true){
                    this.params.orderList = [];
                    let othis = this;
                    this.sData.list.forEach(function(val){
                        othis.params.orderList.push(val.orderId)
                    })
                }else{
                    this.params.orderList = [];
                }
                console.log(this.params.orderList);
                var othis = this;
                this.isTaking.forEach(function(val){
                    if(othis.allCheck){
                        othis.checkNum = othis.isTaking.length;
                        val.taking = true;
                    }else{
                        othis.checkNum = 0;
                        val.taking = false;
                    }
                    
                })
            }
        },
        addPage (){
            this.load=true;
            this.page = parseInt(this.page + 1);
            this.getAjax('/order/remote/dispatchingForAdmin',{'currentPage':this.page},
            (res) => {
                if(res&&res.data){
                    let othis = this;
                    if(this.sData.length != 0){   
                        if(res.data.list.length !=0){
                            this.load = false;
                            res.data.list.forEach(function(item,index){
                                othis.isTaking.push({taking:false});
                                othis.sData.list.push(item);
                            })
                        }else{
                            this.noMore = true;
                            setTimeout(function(){othis.load=false;othis.noMore=false},1000)
                            othis.add = false;
                            console.log(othis.add);
                        }
                        console.log(othis.sData)    
                    }else{
                        
                        this.sData = res.data;
                    }
                              
                }else{
                    m$.template({
                       val: '很抱歉,失败了,请稍后再试',
                       time: 1500
                    })
                }
              
            })
        }   
    },
    created(){
        m$.documentTitle('接单');
        this.getAjax('/order/remote/dispatchingForAdmin', {'currentPage':1},
        (res) => {
            if(res&&res.data){
                this.isShow= true;
                console.log('下面是数据');
                this.sData = res.data;
                console.log(this.sData)
                if(this.sData.admin.dispatchingType == 1){
                    this.titleText = '自营配送订单池';
                    this.params.dispatchingType = 1;
                } else if(this.sData.admin.dispatchingType == 2){
                    this.titleText = '第三方配送订单池';
                    this.params.dispatchingType = 2;
                } else if(this.sData.admin.dispatchingType == 3){
                    this.titleText = '快递配送订单池';
                    this.params.dispatchingType = 3;
                }else{
                    console.log('不是配送人员')
                    this.notMember = true;
                }
                let othis = this;
                if(this.sData.admin.dispatchingType == 1 || this.sData.admin.dispatchingType == 2){
                    setInterval(function(){
                        if(othis.sData.list&&othis.sData.list.length>0){
                            var newList=[];
                            othis.sData.list.map(function(item,idx){
                                var newItem=item;
                                if(item.sendTime){
                                    
                                    var time = (Math.floor((new Date(item.sendTime.split('~')[0].replace(/\-/g,'/')).getTime() - new Date().getTime())/1000));
                                    if(time<=0){
                                        newItem['countTime'] = '已超时'
                                    }else{
                                        var d = Math.floor(time/24/3600);
                                        if(d<=0){
                                            var h = Math.floor(time/3600);
                                        }else{
                                            var h = Math.floor(time/3600 - d*24);
                                        }
                                        
                                        var m = Math.floor(time%3600/60);
                                        var s = Math.floor(time%3600%60);
                                        if(h<10){
                                            h = '0'+h;
                                        }
                                        if(m<10){
                                            m = '0'+ m;
                                        }
                                        if(s<10){
                                            s = '0'+s;
                                        }
                                        if(d<=0){
                                            newItem['countTime'] ='剩余时间: '+ h+':'+ m +':' +s;
                                        }else{
                                            newItem['countTime'] ='剩余时间: '+ d +'天  '+ h+':'+ m +':' +s;
                                        }
                                    }   
                                    newList.push(newItem);
                                }else{
                                    newList.push(newItem);
                                }
                            
                            })
                            othis.sData.list=newList;
                        }
                    
                    },1000)
                }
                if(this.sData.list.length == 0){
                    this.isEmpty = true;
                }
                for(var i=0;i<this.sData.list.length;i++){
                    this.isTaking.push({taking:false})
                }
            }else{
                m$.template({
                   val: '很抱歉,失败了,请稍后再试',
                   time: 1500
                })
            }
          
        })
    },
    watch:{
    },
    mounted(){
        let othis = this;
        m$.scroll(function(){
            othis.addPage();
        }) 
              
    },
    components: {
        selfFooter: require('@/components/selfSupport/Footer')
    }
}
</script>
<style scoped lang="less">
   .taking{
    font-size: 0.3rem;
    background: #ececec;
        .head{
            height: .88rem;
            width: 100%;
            position: fixed;
            top:0;
            z-index: 2;
            line-height: 0.88rem;
            text-align: center;
            border-bottom: 1px solid #cbcbcb;
            margin-bottom: .22rem;
            background: white;
            >*{
                vertical-align: middle;
                display: inline-block;
            }
            img{
                width:.32rem;
                height:.4rem;
                margin-right: .1rem;
            }
            span{
                font-size: .34rem;
                color: #000;
            }
        }
        .ordersBox{
            margin-top: 1.1rem;
            margin-bottom: 2.1rem;
        }
        .orders {
            background:#ffffff;
            box-shadow:0px 2px 10px 0px rgba(179,179,179,0.50);
            margin-top: .22rem;
            .orderHead{
                padding: 0 .3rem;
                height: .8rem;
                line-height: .8rem;
                box-sizing: border-box;
                border-bottom:1px dashed #d3d3d3;
                label{
                    float: left;
                    height:.4rem;
                    >*{
                        vertical-align: middle;
                        display: inline-block;
                    }
                    img{
                        width:.40rem;
                        height:.40rem;
                    }
                    span{
                        font-size: .3rem;
                    }
                }
                .lastTime{
                    float: right;
                    color: #f85c5c;
                }
            }
            .detail{
                padding: 0 .3rem;
                border-bottom:1px dashed #d3d3d3;
                height:1.8rem;
                div{
                    display: inline-block;
                }
                img{
                    width:1.3rem;
                    hight:1.3rem;
                    margin-top: .25rem;
                    float: left;
                    margin-right: .15rem;
                }
                .detailData{
                    width:4.77rem;
                    margin-top: .35rem;
                    p:nth-of-type(1){
                        font-size: .28rem;
                    }
                    p:nth-of-type(2){
                        font-size: .26rem;
                        color: #8d8d8d;
                    }
                }
                .num{
                    position: relative;
                    top:-8%;
                    z-index: 1;
                }
            }
            .information{
                padding: .25rem .3rem;
                border-bottom:1px solid #d3d3d3;
                .infor1{
                    font-size: .3rem;
                    padding-bottom: .1rem;
                    span:nth-of-type(1){
                        width:1.5rem;
                        display: inline-block;
                    }
                }
                .infor2{
                    font-size: .28rem;
                    color: #8f8f8f;
                }
            }
            .itm{
                padding: .25rem .3rem;
                border-bottom:1px solid #d3d3d3;
                font-size: .3rem;
                span:nth-of-type(1){
                    width:1.5rem;
                    display: inline-block;
                }
            }
        }
        .sure{ 
            position: fixed;
            z-index: 2;
            bottom: .98rem;
            background: white;
            width: 100%;
            border-top: 1px solid #e3e3e3;
            div{
                display: inline-block;    
            }
            label{
                padding: .25rem 0;
                padding-left: .3rem; 
                font-size: .3rem;
                 >*{
                        vertical-align: middle;
                        display: inline-block;
                    }
                img{
                    width:.42rem;
                    height:.42rem;
                }
                margin-right: .68rem;
            }
            .choosed{
                padding: .25rem 0.3rem;
                span:nth-of-type(1){
                    font-size: .28rem;
                    color: #7e7e7e;
                }
                 span:nth-of-type(2){
                    font-size: .36rem;
                    color: #ff1b1b;
                }
            }
            .sureOrder{
                background: #000;
                height:1rem;
                width:2.4rem;
                float: right;
                color: white;
                font-size: .34rem;
                line-height: 1rem;
                text-align: center;
            }
        }
        .delivery{
            background:rgba(0,0,0,0.30);
            width:100%;
            height:100%;
            position: fixed;
            z-index: 5;
            top:0;
            div{
                background:#ffffff;
                width:5.80rem;
                margin:0 auto;
                margin-top: 4rem;
                text-align: center;
                border-radius: .3rem;
                overflow: hidden;
                .tit{
                    font-size: .34rem;
                    color: #030303;
                    line-height: .34rem;
                    padding-top: .5rem;
                    padding-bottom: .4rem;
                }
                input{
                    width: 4.8rem;
                    height:.8rem;
                    border-radius: .03rem;
                    background: #ebebeb;
                    font-size: .3rem;
                    color: #a3a3a3;
                    padding:0 .2rem; 
                    display: block;
                    margin:0 auto;
                    margin-bottom: .25rem;
                }
                .btn{
                    font-size: .32rem;
                    span{
                        display: inline-block;
                        width: 2rem;
                        height:.8rem;
                        line-height: .78rem;
                        border-radius: .12rem;
                        border:.01rem solid #000;
                        margin-top: .2rem;
                        margin-bottom: .5rem;
                    }
                    .cancel{
                        background: white;
                        float: left;
                        margin-left: .5rem;
                    }
                    .submit{
                        background: #000;
                        color: white;
                        float: right;
                        margin-right: .5rem;
                    }
                }
            }
        }
        .empty{
            position: absolute;
            top:30%;
            left: 0;
            right:0;
            text-align: center;
            z-index: 4;
            font-size:.3rem;
            color:#a9a9a9;
            line-height:.3rem;
            img{
                width:1.4rem;
                height:1.4rem;
                margin-bottom: .15rem;
            }
        }
        .loading{
            display: inline-block;
            color: white;
            padding: 0.2rem 0.14rem;
            font-size: 0.28rem;
            text-align: center;
            background: rgba(0,0,0,0.71);
            border-radius: 0.1rem;
            max-width: 40%;
            min-width: 1.46rem;
            position: fixed;
            left: 40%;
            top: 50%;
            box-sizing: border-box;
            img{
                height:.5rem;
                vertical-align: middle;
            }
        }
        .notMemberPage{
            width:100%;
            height:100%;
            position: absolute;
            top:0;
            z-index: 3;
        }
   }
</style>